<template>
	<div class="cell-item-demo2">
		<ynet-cell-item title="交通银行(尾号3089)" brief="展示摘要描述"></ynet-cell-item>
		<ynet-cell-item title="招商银行(尾号3089)" brief="展示摘要描述">
			<ynet-switch v-model="open" slot="right"></ynet-switch>
		</ynet-cell-item>
		<ynet-cell-item title="交通银行" brief="展示摘要描述" addon="附加文案" arrow></ynet-cell-item>
		<ynet-cell-item title="交通银行" brief="展示摘要描述" arrow>
			<span class="holder" slot="left"></span>
		</ynet-cell-item>
		<ynet-cell-item title="交通银行" brief="展示摘要描述" addon="附加文案" arrow>
			<span class="holder" slot="left"></span>
		</ynet-cell-item>
		<ynet-cell-item title="交通银行" brief="展示摘要描述" addon="附加文案" disabled  arrow>
			<span class="holder" slot="left"></span>
		</ynet-cell-item>
		<ynet-cell-item title="交通银行" brief="展示摘要描述" addon="附加文案" arrow>
			<span class="holder" slot="left"></span>
			<div class="custom-right-txt" slot="right">
				<p>Ynet</p>
				<p>Mobile</p>
			</div>
		</ynet-cell-item>
		<ynet-cell-item title="交通银行" brief="展示摘要描述" addon="附加文案" arrow>
			<span class="holder" slot="left"></span>
			<div class="custom-right-txt" slot="right">
				<ynet-tag
					size="small"
					type="ghost"
					shape="circle"
					font-color="#FC7353"
				>特惠</ynet-tag>
				<p>Mobile</p>
			</div>
		</ynet-cell-item>
		<ynet-cell-item title="Ynet Mobile" brief="A mobile UI toolkit" arrow>
			<p slot="children" style="font-size:0.24rem;color:#858B9C;">
				面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。基于「合理、好用」设计价值观，从交互操作、视觉抽象、图形可视等角度共同解决问题。
			</p>
		</ynet-cell-item>
	</div>
</template>
<script>
	import { CellItem, Switch, Icon, Tag } from 'ynet-mobile'
	export default {
		title: '双行列表',
		name: 'cell-item-demo',
		components: {
			[CellItem.name]: CellItem,
			[Switch.name]: Switch,
			[Icon.name]: Icon,
			[Tag.name]: Tag
		},
		data(){
			return {
				open: false,
				open1: true
			}
		}
	}
</script>
<style lang="scss">
	.cell-item-demo2{
		background: #fff;
		padding: 0 .2rem;
		.holder{
			display: block;
			width: 88px;
			height: 88px;
			border-radius: 50%;
			background-color: #E6E6E6
		}
		.custom-right-txt{
			text-align: right
		}
	}
</style>